<!--上拉控件-->
<template>
  <van-action-sheet v-model:show="shows">
    <van-picker
      :title="title"
      :columns="columns"
      :columns-field-names="columnsFieldNames"
      :default-index="defaultIndex"
      @confirm="confirm"
      @cancel="cancel"
      @change="change"
    />
  </van-action-sheet>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, watch } from "vue";

export default {
  name: "TopPull",
  props: {
    columns: Array, // 上拉的数据
    show: Boolean, // 是否显示
    defaultIndex: [String, Number], // 默认选中
    title: {
      type: String,
      default: () => {
        return "请选择";
      }
    },
    columnsFieldNames: {
      // 搜索的key
      type: Object,
      default: () => {
        return {
          text: "label",
          values: "value",
          children: "children"
        };
      }
    }
  },
  emits: ["update:show", "change", "checks"],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const pageData = reactive({
      shows: props.show
    });
    // 打开补录弹窗
    watch(
      () => props.show,
      item => {
        pageData.shows = item;
      },
      { immediate: true }
    );
    const pageMethod = {
      confirm(data) {
        // 完成
        proxy.$emit("change", data);
        pageMethod.cancel();
      },
      cancel() {
        // 取消
        proxy.$emit("update:show", false);
      },
      change(data) {
        // 选中
        proxy.$emit("checks", data);
      }
    };
    return {
      ...pageMethod,
      ...props,
      ...toRefs(pageData)
    };
  }
};
</script>

<style scoped></style>
